<template>
	<div class="body">
		<view class="content">
			<div class="li">
				<div class="title">头像</div>
				<image :src="userInfos.avatar" mode=""></image>
			</div>
			<div class="li">
				<div class="title">昵称</div>
				<div class="text">{{ userInfos.name }}</div>
			</div>
			<div class="li">
				<div class="title">真实姓名</div>
				<div class="text">{{ userInfos.realName }}</div>
			</div>
			<div class="li">
				<div class="title">手机号</div>
				<div class="text">{{ userInfos.phone }}</div>
			</div>
			<div class="li">
				<div class="title">保证金</div>
				<uni-icons type="forward" size="25" color="#fffff" @click="ensure"></uni-icons>
			</div>
		</view>
		<div class="edit">
			<a @click="edit">编辑信息</a> <uni-icons type="forward" size="30">编辑信息</uni-icons>
		</div>
		<div class="btn" @click="signOut">退出登录</div>
	</div>
</template>

<script>
	import Api from "../../API/api";
	export default {
		data() {
			return {
				userInfos: {}
			}
		},
		//获取个人信息
		onLoad() {
			Api.getwxuser().then(res => {
				this.userInfos = res.data
			})
		},
		methods: {
			//保证金
			ensure() {
				uni.setStorageSync('userInform', this.userInfos);
				uni.navigateTo({
					url: '/pages/index/ensure'
				})
			},
			edit() {
				uni.setStorageSync('userInform', this.userInfos);
				uni.navigateTo({
					url: '/pages/index/edit'
				})
			},
			//退出登录
			signOut() {
				Api.delLogin().then(() => {

				})
				uni.removeStorageSync("token");
				uni.reLaunch({
				  url: "/pages/login/login_phone"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx;


		.li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx;
			padding: 20rpx;
			height: 80rpx;
			border-bottom: 1px solid #D8D8D8;

			&:last-child {
				border: 0;
			}

			.title {
				font-weight: 600;
			}

			.text {
				color: #bbb;
			}

			.icon {}

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		border-radius: 48rpx;
		opacity: 0.5;
		border: 2rpx solid #070E2F;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.edit {
		color: #ccc;
		margin-top: 30px;
		text-align: center;

		a {
			position: relative;
			bottom: 5px;
		}
	}
</style>